<template>
  <div class="SuperMContainer">
    <div class="SuperMTitle">{{ msg.title }}</div>
    <div class="SuperMLine"><line_a /></div>
    <div class="SuperMbtn">
      <btn_radio_c
        class="SuperMbtnc1"
        :options="params"
        check-color="#035DB9"
        font-size="18px"
        no-check-color="#A3A3A3"
      />
      <btn_a :title="i18nt.buttons.more2" color="#A3A3A3" font-size="18px" />
    </div>
    <div class="SuperMimage1"><groupone /></div>
    <div class="SuperMimage2"><groupone /></div>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import line_a from "@/components/line/line_a.vue";
import btn_radio_c from "@/components/buttons/btn_radio_c.vue";
import btn_a from "@/components/buttons/btn_a.vue";
import groupone from "./_4compg1.vue";

const msg = i18nt.value.constantsOne.SuperM;

const params = [
  { value: "a", title: msg.btn1 },
  { value: "b", title: msg.btn2 },
  { value: "c", title: msg.btn3 },
];
</script>

<style scoped lang="scss">
.SuperMContainer {
  @include relative_hw(100%, 100%);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  // background: #bffaf1;

  .SuperMTitle {
    @include rel_cen_hw(48px, 136px);
    font-family: "Songti SC", "Songti SC";
    font-weight: 900;
    font-size: 34px;
    color: #035db9;
  }

  .SuperMLine {
    @include rel_cen_hw(26px, 100%);
  }

  .SuperMbtn {
    @include relative_hw(25px, 100%);
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    .SuperMbtnc1 {
      width: 306px;
      margin-right: 30px;
    }
  }

  .SuperMimage1,
  .SuperMimage2 {
    @include rel_cen_hw(358px, 100%);
  }
}
</style>
